<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01_HelloWorld</title>
</head>
<body>
<!--1、引入Vue.js
    2、创建Vue对象
        el：指定根element（选择器）
        data:初始化数据（页面可以访问）
    3、双向数据绑定：v-model
    4、显示数据：{{XXX}}}
    5、理解vue的mvvm实现

-->

<div id="app" > <!--mvvn中的 第一个v view-->
    <input type="text" v-model="message">
    <p>Hello {{message}}</p>
</div>


<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    //创建vue实例  const  vm  可换成var  app      这个是mvvn中的最后vm
    const vm= new Vue({ //配置对象
        el: '#app',  //element 选择器
        data: { //数据    mvvn中的model
            message:  '11'
        }
    })

</script>
<!--
MVVM
model ：模型，数据对象(data)
view :视图，模版页面
viewModel ：视图模型(Vue的实例)

-->
</body>
</html>